<template>
  <p>eat: {{ obj.hobby.eat }}</p>
  <button @click="update">update eat</button>
</template>

<script>
import { reactive, watch } from 'vue'
// 需求：修改 eat 后触发监听，做一些事
// watch 可以监听 reactive 【内部】数据
export default {
  setup() {
    const obj = reactive({
      name: 'ifer',
      hobby: {
        eat: '西瓜',
      },
    })
    const update = () => {
      // reactive 包装的对象，是递归监听的，说白了对内部数据的修改都是响应式的
      obj.hobby.eat = '面条'
    }

    // 参数1：监听谁
    // 参数2：发生变化后触发的回调
    watch(
      obj,
      (newValue, oldValue) => {
        // 注意，这儿新旧值是全等的（或者说没有旧值）
        console.log(newValue === oldValue)
      },
      {
        deep: false, // 默认开启了深度监听，且配置无效
      }
    )

    /* function update() {
      console.log(1)
    } */
    /* const update = function () {
      console.log(1)
    } */
    return { obj, update }
  },
}
</script>
